<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VIR Application</title>
    {% load static %}
    <link rel="stylesheet" href="{% static 'vir/css/circuit-elements.css' %}">
</head>
<body>
    <h1>Welcome to VIR Application</h1>
    <div id="circuit-simulator">
        <h2>Circuit Simulator</h2>
        <div id="calculation-results" style="margin-top: 20px;"></div>
        <button id="calculate-btn" style="margin-top: 10px;">Calculate Circuit</button>
    </div>
    <script type="module">
        import { CircuitEditor } from "/static/vir/js/editor/CircuitEditor.js";
        import { Resistor, VoltageSource } from "/static/vir/js/circuit-elements.js";
        import { PhysicsLaws } from "/static/vir/js/physics-laws.js";
        
        // Initialize editor
        const editor = new CircuitEditor(document.getElementById('circuit-simulator'));

        document.getElementById('calculate-btn').addEventListener('click', () => {
            // Create circuit elements
            const resistor = new Resistor({ 
                resistance: 1000,
                position: { x: 200, y: 100 }
            });
            
            const voltageSource = new VoltageSource({
                voltage: 5,
                position: { x: 100, y: 100 }
            });

            // Connect elements
            voltageSource.connectTo(resistor, 'output');

            // Calculate circuit
            voltageSource.calculate();
            resistor.calculate();

            // Display results
            const resultsDiv = document.getElementById('calculation-results');
            resultsDiv.innerHTML = `
                <h3>Calculation Results:</h3>
                <p>Voltage Source Output: ${voltageSource.outputs[0].voltage} V</p>
                <p>Resistor Voltage Drop: ${voltageSource.outputs[0].voltage - resistor.outputs[0].voltage} V</p>
                <p>Circuit Current: ${resistor.outputs[0].current} A</p>
            `;

            // Verify Kirchhoff's Laws
            const node = {
                connections: [
                    { current: voltageSource.outputs[0].current, direction: 'out' },
                    { current: resistor.inputs[0].current, direction: 'in' }
                ]
            };
            
            const kclValid = PhysicsLaws.kirchhoffCurrent(node);
            resultsDiv.innerHTML += `
                <p>Kirchhoff's Current Law: ${kclValid ? 'Valid' : 'Invalid'}</p>
            `;
        });
    </script>
</body>
</html>